<template>
  <div id="a">
    <div class="c">
      <img
        style="width: 100%; height: 100%"
        src="../../../assets/img/bgimg1.png"
      />
      <div class="cover">
        <div class="container cc2">
          <div class="cover2">
            <div class="co2-1">
              <p>“让我看见你的声音”</p>
            </div>
            <div class="co2-2">
              <p>「智能手语识别平台」</p>
              <p>兼具识别与学习 帮助手语交流</p>
            </div>
            <a class="co2-3" @click="toRegister()" href="javascript:void(0);"
              >免 费 创 建 账 户</a
            >
          </div>
        </div>
        <div class="container cc1">
          <div class="cover1 col-lg-6 col-md-6 pull-right">
            <div class="co1 hide" id="con">
              <span><br />“让我看见你的声音”</span>
            </div>
            <div class="co1" id="show"></div>
            <div class="co2">
              <p>「智能手语识别平台」</p>
              <p>兼具识别与学习 帮助手语交流</p>
            </div>
            <a class="co3" @click="toRegister()" href="javascript:void(0);"
              >免 费 创 建 账 户</a
            >
          </div>
        </div>
        <div class="container cc1">
          <div class="coverA">
            <a href="">
              <i class="glyphicon glyphicon-chevron-down"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="c1">
        <div class="container">
          <h1 class="hh1" style="font-size: 44px; padding-bottom: 20px">
            更快，更简单
          </h1>
          <p class="p1">采用OpenPose技术构建</p>
          <p class="p1">实时性和高精度，极好的鲁棒性</p>
        </div>
      </div>
      <div class="c2">
        <div
          class="content"
          style="overflow: hidden; margin: 0 auto; max-width: 2500px"
        >
          <div
            class="
              col-lg-7 col-md-7 col-sm-12 col-xs-12
              pull-left
              pic1
              clearfix
            "
            id="c2-1"
          >
            <img src="../../../assets/img/p1-02.png" style="width: 100%" />
          </div>
          <div
            class="w1 col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-left clearfix"
            id="c2-2"
          >
            <div style="width: 80%; margin: 0 auto">
              <h1 class="hh1" style="font-size: 34px; padding-bottom: 10px">
                基于OpenPose技术，快速识别手语
              </h1>
              <p class="p1" style="font-size: 15px; line-height: 30px">
                智能手语识别平台代表着当今智能识别的先进水平。我们的识别算法，将手语图片或者视频转化为直观的文字显示。在这里，您仅需将需要翻译的手语图片或者视频上传，您会发现完全不需要花大量时间与精力去翻译，这就是智能识别手语平台的神奇之处。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="c3" id="c3">
        <div
          class="content"
          style="overflow: hidden; margin: 0 auto; max-width: 2500px"
        >
          <div
            class="
              col-lg-7 col-md-7 col-sm-12 col-xs-12
              pull-right
              pic2
              clearfix
            "
            id="c3-2"
          >
            <img src="../../../assets/img/p1-03.png" style="width: 100%" />
          </div>
          <div
            class="w1 col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-left clearfix"
            id="c3-1"
          >
            <div style="width: 80%; margin: 0 auto">
              <h1
                class="hh1"
                style="font-size: 34px; color: #3ea3ff; padding-bottom: 20px"
              >
                包含智能识别与学习，让识别变得更加全面
              </h1>
              <p class="p1" style="font-size: 15px; line-height: 30px">
                不同于其它简单的手语智能识别，智能手语识别平台采用的是手语识别与手语学习相结合的方式。在进行识别之后还可以收藏并进行学习，也可以在平台自行学习查阅手语知识。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="c4">
        <div
          class="content"
          style="overflow: hidden; margin: 0 auto; max-width: 2500px"
        >
          <div
            class="
              col-lg-7 col-md-7 col-sm-12 col-xs-12
              pull-left
              pic1
              clearfix
            "
            id="c4-1"
          >
            <img src="../../../assets/img/p1-04.png" style="width: 100%" />
          </div>
          <div
            class="w1 col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-left clearfix"
            id="c4-2"
          >
            <div style="width: 80%; margin: 0 auto">
              <h1 class="hh1" style="font-size: 34px; padding-bottom: 20px">
                VGG-16模型
              </h1>
              <p class="p2" style="font-size: 15px; line-height: 30px">
                VGG卷积神经网络是牛津大学计算机视觉实验室参加2014年ILSVRC（ImageNet
                Large Scale Visual Recognition
                Challenge)比赛的网络结构，为了解决ImageNet中的1000类图像分类和定位问题。
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="c6">
        <div style="overflow: hidden; margin: 0 auto">
          <div
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix"
            id="c6-1"
          >
            <h1 class="hh1" style="font-size: 36px; padding-bottom: 20px">
              不仅仅有手语识别
            </h1>
            <p class="p1" style="font-size: 16px">
              超高性能云手语识别，知识收藏，手语学习，培训指导
            </p>
          </div>
          <div
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix"
            style="margin-top: 60px"
          >
            <a class="a" id="a1">
              <img src="../../../assets/img/p1-16-2.png" class="img2" />
              <img src="../../../assets/img/p1-16-1.png" class="img1" />
              <p style="padding-top: 10px"><b>速度</b></p>
            </a>
            <a class="a" id="a2">
              <img src="../../../assets/img/p1-17-2.png" class="img3" />
              <img src="../../../assets/img/p1-17-1.png" class="img1" />
              <p style="padding-top: 10px"><b>缓存</b></p>
            </a>
            <a class="a" id="a3">
              <img src="../../../assets/img/p1-13-2.png" class="img3" />
              <img src="../../../assets/img/p1-13-1.png" class="img1" />
              <p style="padding-top: 10px"><b>压缩</b></p>
            </a>
          </div>
          <div
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix"
            style="margin-top: 40px"
          >
            <a class="a" id="a4">
              <img src="../../../assets/img/p1-14-2.png" class="img3" />
              <img src="../../../assets/img/p1-14-1.png" class="img1" />
              <p style="padding-top: 10px"><b>搜索</b></p>
            </a>
            <a class="a" id="a5">
              <img src="../../../assets/img/p1-15-2.png" class="img3" />
              <img src="../../../assets/img/p1-15-1.png" class="img1" />
              <p style="padding-top: 10px"><b>信息云同步</b></p>
            </a>
            <a class="a" id="a6">
              <img src="../../../assets/img/p1-12-2.png" class="img3" />
              <img src="../../../assets/img/p1-12-1.png" class="img1" />
              <p style="padding-top: 10px"><b>图片保存</b></p>
            </a>
          </div>
        </div>
      </div>
      <div class="c7">
        <div class="container">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="c7-1">
            <h1 class="hh1" style="font-size: 36px; padding-bottom: 40px">
              常用手语交流教程
            </h1>
            <p class="p1" style="font-size: 18px; color: #a9a9a9">
              您可以从众多教程中挑选出您最喜欢的
            </p>
            <p class="p1">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
          </div>
        </div>
        <div class="container">
          <div
            id="single"
            class="carousel slide"
            data-ride="carousel"
            data-shift="1"
          >
            <div class="carousel-inner">
              <ul class="row item active">
                <li class="col-xs-4 one">
                  <img
                    src="../../../assets/img/p1-18.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1LW411s7gR?from=search&seid=8606835984006343109&spm_id_from=333.337.0.0'"
                  />
                </li>
                <li class="col-xs-4 two">
                  <img
                    src="../../../assets/img/p1-19.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1bb411k771?from=search&seid=17171025815454556426&spm_id_from=333.337.0.0'"
                  />
                </li>
                <li class="col-xs-4 three">
                  <img
                    src="../../../assets/img/p1-20.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1e7411A74r?from=search&seid=14150205177321805845&spm_id_from=333.337.0.0'"
                  />
                </li>
              </ul>
              <ul class="row item">
                <li class="col-xs-4 four">
                  <img
                    src="../../../assets/img/p1-21.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1Lt411f7VE?from=search&seid=9340996400083073805&spm_id_from=333.337.0.0'"
                  />
                </li>
                <li class="col-xs-4 five">
                  <img
                    src="../../../assets/img/p1-22.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1NW411V7df?from=search&seid=17568862680274362656&spm_id_from=333.337.0.0'"
                  />
                </li>
                <li class="col-xs-4 six">
                  <img
                    src="../../../assets/img/p1-23.png"
                    class="img-responsive"
                    onclick="javascript:location.href='https://www.bilibili.com/video/BV1Ct411o7pZ?from=search&seid=679032575800944788&spm_id_from=333.337.0.0'"
                  />
                </li>
              </ul>
            </div>
            <a class="carousel-control left" href="#single" data-slide="prev">
              <span class="glyphicon glyphicon-menu-left"></span>
            </a>
            <a class="carousel-control right" href="#single" data-slide="next">
              <span class="glyphicon glyphicon-menu-right"></span>
            </a>
          </div>
        </div>
      </div>
      <div class="c8">
        <div style="overflow: hidden; margin: 0 auto">
          <div
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix"
            id="c8-1"
          >
            <h1 class="hh1" style="font-size: 36px; padding-bottom: 20px">
              手语单词
            </h1>
            <p class="p1" style="font-size: 16px; color: #a9a9a9">
              千里之行，始于足下
            </p>
          </div>
          <div
            style="
              overflow: hidden;
              margin: 0 auto;
              width: 95%;
              max-width: 1800px;
              padding-top: 50px;
            "
          >
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/F.png"
              /></a>
              <p>F</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/U.png"
              /></a>
              <p>U</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/N.png"
              /></a>
              <p>N</p>
            </div>
            <p class="p1">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/D.png"
              /></a>
              <p>D</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/A.png"
              /></a>
              <p>A</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
              <a href=""
                ><img class="img-responsive" src="../../../assets/img/Y.png"
              /></a>
              <p>Y</p>
            </div>
          </div>
          <p class="p1">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </p>
        </div>
      </div>

      <div class="c11">
        <div
          class="container"
          style="overflow: hidden; margin: 0 auto; padding-bottom: 50px"
        >
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="c11-1">
            <h1 class="hh1" style="font-size: 36px">客户反馈</h1>
            <hr
              style="
                width: 100%;
                border: none;
                height: 1px;
                background-color: #e2e2e2;
              "
            />
          </div>
        </div>
        <div class="container">
          <div id="kehu-carousel" class="carousel slide" data-interval="false">
            <ol class="carousel-indicators">
              <li
                class="active"
                data-target="#kehu-carousel"
                data-slide-to="0"
              ></li>
              <li data-target="#kehu-carousel" data-slide-to="1"></li>
              <li data-target="#kehu-carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <div style="overflow: hidden">
                  <div class="col-md-3">
                    <img src="../../../assets/img/p1-26 (2).png" />
                  </div>
                  <div
                    class="col-md-9"
                    style="
                      height: 153px;
                      padding-left: 30px;
                      padding-right: 80px;
                    "
                  >
                    <p
                      style="
                        font-size: 13px;
                        text-align: left;
                        color: #a9a9a9;
                        line-height: 26px;
                      "
                    >
                      我们尝试使用智能手语识别平台与聋哑朋友进行了交流，发现意外的好用！而且里面的手语学习也十分方便。
                    </p>
                    <br />
                  </div>
                </div>
              </div>
              <div class="item">
                <div style="overflow: hidden">
                  <div class="col-md-3">
                    <img src="../../../assets/img/p1-26 (3).png" />
                  </div>
                  <div
                    class="col-md-9"
                    style="
                      height: 153px;
                      padding-left: 30px;
                      padding-right: 80px;
                    "
                  >
                    <p
                      style="
                        font-size: 13px;
                        text-align: left;
                        color: #a9a9a9;
                        line-height: 26px;
                      "
                    >
                      谢谢这个平台，对我帮助非常的大！
                    </p>
                    <br />
                  </div>
                </div>
              </div>
              <div class="item">
                <div style="overflow: hidden">
                  <div class="col-md-3">
                    <img src="../../../assets/img/p1-26 (1).png" />
                  </div>
                  <div
                    class="col-md-9"
                    style="
                      height: 153px;
                      padding-left: 30px;
                      padding-right: 80px;
                    "
                  >
                    <p
                      style="
                        font-size: 13px;
                        text-align: left;
                        color: #a9a9a9;
                        line-height: 26px;
                      "
                    >
                      这个平台对我这种想要手语交流的懒人来说非常的棒！
                    </p>
                  </div>
                </div>
              </div>
              <a
                class="left carousel-control"
                href="#kehu-carousel"
                data-slide="prev"
              >
                <span class="glyphicon glyphicon-menu-left"></span>
              </a>
              <a
                id="right-carousel-control"
                class="right carousel-control"
                href="#kehu-carousel"
                data-slide="next"
              >
                <span class="glyphicon glyphicon-menu-right"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--c11客户反馈-->
      <div class="c12">
        <div class="container">
          <hr
            style="
              width: 100%;
              border: none;
              height: 1px;
              background-color: #e2e2e2;
            "
          />
          <div class="c12-1">
            <div
              class="col-lg-3 col-md-3 col-sm-12 col-xs-12"
              style="line-height: 36px; padding-left: 0; padding-bottom: 25px"
            >
              <p style="font-size: 16px">客户服务热线：</p>
              <p style="font-size: 22px">5981-000-721</p>
            </div>
            <div
              class="col-lg-6 col-md-6 col-sm-12 col-xs-12"
              style="line-height: 36px; padding-left: 0; padding-bottom: 25px"
            >
              <p style="font-size: 20px">
                工作时间：09:00~19:00（节假日定时响应）
              </p>
              <p style="font-size: 14px">为每个用户提供优质的客户服务</p>
            </div>
            <div
              class="col-lg-3 col-md-3 col-sm-12 col-xs-12"
              style="padding-right: 0"
            >
              <img src="../../../assets/img/p1-27.jpg" class="pull-right" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="f1">
        <div class="container">
          <div class="ff1 col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="ff1-1">智能手语识别平台</div>
            <div class="ff1-2">专注于帮助聋哑人交流。</div>
            <div class="ff1-3">
              <p>Q Q客服：888888888</p>
              <p>客服热线：8808-056-777 / 0079-35712580</p>
            </div>
          </div>
          <div class="ff2 col-lg-8 col-md-8">
            <div class="col-lg-2 col-md-2">
              <div class="ff2-1">
                <p>团队信息</p>
              </div>
              <p><a href="#">团队介绍</a></p>
              <p><a href="#">服务条款</a></p>
              <p><a href="#">法律声明</a></p>
              <p><a href="#">可接受服务</a></p>
              <p><a href="#">免责声明</a></p>
            </div>
            <div class="col-lg-2 col-md-2">
              <div class="ff2-1">
                <p>技术支持</p>
              </div>
              <p><a href="#">联系客服</a></p>
              <p><a href="#">建站教程</a></p>
              <p><a href="#">更新日志</a></p>
              <p><a href="#">博客</a></p>
              <p><a>免责声明</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    toMain() {
      this.$router.push("/main");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toIdentity() {
      this.$router.push("/identity");
    },
    toRegister() {
      this.$router.push("/register");
    },
    toCourse() {
      this.$router.push("/course");
    },
    toLearn() {
      this.$router.push("/learn");
    },
    toPersonal() {
      this.$router.push("/personal");
    },
  },
  mounted: function () {
    this.$emit("getChildName", "main");
  },
};
import $ from "jquery";
$(function () {
  var $str = $("#con span"),
    $show = $("#show"),
    Innt = [], //预定义用存储的数组
    Index = 0, //预定义用存储的数组的角标
    Itimes = 0, //光标闪烁次数
    FootIndex = 0, //输出时用的角标
    InnerHTML = "", //当前页面已经输出的元素
    Auto = null, //自动打印方法
    temp = "", //保存标签的变量
    flag = true, //标记标签已经开始
    endFlag = false; //判断标签结束
  for (var i = 0; i < $str.length; i++) {
    for (var j = 0; j < $str.eq(i).html().length; j++) {
      if ($str.eq(i).html()[j] == "<") {
        flag = false;
      }
      endFlag = false;
      if ($str.eq(i).html()[j] == ">") {
        endFlag = true;
      }
      if (flag) {
        Innt[Index++] = $str.eq(i).html()[j];
      } else {
        temp += $str.eq(i).html()[j];
        if (endFlag) {
          Innt[Index++] = temp;
          temp = "";
          flag = true;
        }
      }
    }
  }
  FunOut = function () {
    if (Itimes % 3 != 0) {
      Itimes++;
      $show.html(InnerHTML + "<b>|</b>");
    } else {
      if (FootIndex < Index) {
        InnerHTML += Innt[FootIndex++];
        $show.html(InnerHTML);
      } else {
        clearInterval(Auto);
      }
    }
    Itimes++;
  };
  Auto = setInterval(FunOut, 300);
});
</script>

<style lang="css" scoped>
#main {
  height: 800px;
}
.cover {
  height: 600px;
}
.c {
  height: 600px;
}
</style>
